<template>
  <div class="battle-history">
    <div class="battle-history-header">
      <div class="history-tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="tab.title"
          :class="{ active: index === active }"
          @click="handleClickTab(index)"
        >
          {{ tab.title }}
        </div>
      </div>
      <v-btn variant="text" @click="handleBack" style="font-size: 15px">返回</v-btn>
    </div>
    <div style="margin-bottom: 5px">
      <el-select
              v-model="query.box_type"
              class="price"
              placeholder="价格排序"
              @change="toSearch"
      >
        <el-option label="全部" :value="-1"></el-option>
        <el-option label="普通箱子" :value="0"></el-option>
        <el-option label="对战箱子" :value="1"></el-option>
        <el-option label="钥匙箱子" :value="4"></el-option>
        <el-option label="充值箱子" :value="5"></el-option>
      </el-select>
    </div>
    <el-table stripe empty-text="暂无对战记录" :data="histroy" v-loading="loading">
      <el-table-column label="时间" prop="battle_time" :width="isMobile ? 90 : 160">
        <template #default="scope">
          {{ $dayjs.unix(scope.row.created_at).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column label="玩家" :width="isMobile ? 100 : 190">
        <template #default="scope">
          <div style="display: flex;align-items: center">
            <div class="user-avatars">
              <img :src="processImageUrl(scope.row.avatar)" alt="" />
            </div>
            <div style="white-space: nowrap">{{scope.row.nickname}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="箱子类型" prop="battle_time" :width="isMobile ? 90 : 160">
        <template #default="scope">
          <div v-if="scope.row.box_type == 0">普通箱子</div>
          <div v-if="scope.row.box_type == 1">对战箱子</div>
          <div v-if="scope.row.box_type == 4">钥匙箱子</div>
          <div v-if="scope.row.box_type == 5">充值箱子</div>
        </template>
      </el-table-column>
      <el-table-column label="盲盒信息" :width="isMobile ? 100 : void 0">
        <template #default="scope">
          <div class="box-skins">
            <img :src="scope.row.image_url" />
            <div>{{scope.row.item_name}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="对战积分" prop="integral" :width="isMobile ? 69 : 100">
        <template #default="scope">
          {{ processScore(scope.row.point) }}
        </template>
      </el-table-column>
      <el-table-column label="花费" prop="spend" :width="isMobile ? 90 : 100">
        <template #default="scope">
          <div class="coin-number">
            <img src="@/static/img/welfare/icon_coin.png" />
            {{ processScore(scope.row.cost) }}
          </div>
        </template>
      </el-table-column>
<!--      <el-table-column width="100">-->
<!--        <template #default="scope">-->
<!--          <div class="py-3">-->
<!--            <v-btn-->
<!--              variant="outlined"-->
<!--              size="small"-->
<!--              class="detail-btn"-->
<!--              @click="handleToBattleDetail(scope.row)"-->
<!--              >{{ status2str(scope.row.status) }}</v-btn-->
<!--            >-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <div class="el-pagination-wrapper">
      <el-pagination
        :total="total"
        :page-size="query.page_size"
        @current-change="currentChange"
        v-model:current-page="query.page"
        :pager-count="isMobile ? 5 : void 0"
        :layout="isMobile ? 'prev, pager, next' : 'prev, pager, next, jumper, ->, total'"
      ></el-pagination>
    </div>
  </div>
</template>
<script lang="ts">
import BattleService from "@/services/BattleService";
import { processImageUrl } from "@/utils";
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { processRobot, status2str, processScore } from "./util";
import {UserService} from "@/services/UserService";

interface BattleHistroy {
  battle_boxs: {
    box_id: number;
    box_name: string;
    image_rrl: string;
  }[];
  battle_time: 1653906600;
  battle_users: {
    avatar: string;
    nickname: string;
    user_id: number;
  }[];
  integral: number;
  room_id: number;
  rounds: number;
  status: number;
  spreed: number;
}

export default defineComponent({
  setup() {
    const router = useRouter();

    const state = reactive({
      query: {
        page: 1,
        page_size: 10,
        box_type:-1
      },

      loading: false,
      total: 0,
      histroy: [] as BattleHistroy[],
      active: 0,
    });

    const getHistory = () => {
      state.loading = true;
      const method = 'boxOpenRecord';
      return BattleService[method](state.query)
        .then((response) => {
          const { list, total } = response.data.data;
          state.histroy = list
          state.total = total;
        })
        .finally(() => {
          state.loading = false;
        });
    };
    const currentChange = async (val) => {
      state.query.page = val;
      getHistory();
    };

    onMounted(() => {
      getHistory();
    });

    return {
      currentChange,
      processImageUrl,
      tabs: [
        {
          title: "游戏记录",
        }
      ],
      handleClickTab: (index: number) => {
        if (state.active === index) return;

        state.active = index;
        state.histroy = [];
        state.query.page = 1;
        getHistory();
      },
      getHistory,
      status2str,
      handleBack: () => {
        const { back } = router.options.history.state;
        if (back) {
          router.back();
        } else {
          router.push("/battle");
        }
      },
      handleToBattleDetail(row: BattleHistroy) {
        router.push(`/battle/${row.room_id}`);
      },
      processScore,
      toSearch(){
        state.query.page = 1;
        getHistory()
      },
      ...toRefs(state),
      isMobile: window.screen.width <= 600,
    };
  },
});
</script>

<style scope lang="scss">
.battle-history {
  max-width: 1520px;
  margin: 50px auto 0 auto;
  padding: 0 30px;
}

.battle-history-header {
  display: flex;
  margin-bottom: 22px;
  align-items: center;
  position: relative;

  > * {
    &:last-child {
      // margin-left: auto;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
  }
}

.history-tabs {
  font-size: 18px;
  text-align: center;
  display: flex;

  > div {
    width: 122px;
    line-height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;

    &:first-child {
      border-radius: 5px 0px 0px 5px;
      border-right: none;
    }

    &:last-child {
      border-radius: 0px 5px 5px 0px;
      border-left: none;
    }

    &.active {
      background: #8e7eed;
      color: #ffffff;
      border-color: transparent;
    }
  }
}

.user-avatars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  > img,
  > div {
    flex: none;
    margin-left: -8px;

    &:nth-child(1) {
      margin-left: 0;
    }
  }

  > div {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

    &.user-winner {
      background: url(@/static/img/battle/avatar.png);
      background-size: 100%;
    }
  }

  img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }
}

.box-skins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  img {
    width: 40px;
    margin-right: 6px;
    margin-bottom: 2px;
  }
}

.coin-number {
  display: flex;
  align-items: center;

  img {
    width: 20px;
    margin-right: 6px;
  }
}

.detail-btn {
  &:hover {
    transform: scale(1.1);
  }
}

.el-pagination-wrapper {
  text-align: center;
  margin-top: 10px;
}
</style>

<style lang="scss">
.battle-history {
  .el-table {
    color: #fff;

    th,
    tr,
    td {
      background: #28253b;
      border: none;
    }
  }

  .el-table__body-wrapper {
    background: #28253b;
  }

  .el-table__row--striped {
    th,
    tr,
    td {
      background: rgba(255, 255, 255, 0.04) !important;
      border: none;
    }
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background: rgba(255, 255, 255, 0.1) !important;
  }
}
</style>

<style scoped lang="scss">
@media screen and (max-width: 600px) {
  .battle-history {
    padding: 0 6px;

    .battle-history-header {
      margin-bottom: 16px;
      justify-content: center;
    }

    .history-tabs {
      > div {
        width: 116px;
        line-height: 32px;
        font-size: 13px;
        border-color: rgba(255, 255, 255, 0.5);

        &.active {
          border-color: transparent;
        }
      }
    }
  }

  .user-avatars {
    img,
    > div {
      width: 24px;
      height: 24px;
    }
  }

  .box-skins {
    min-width: 200px;

    img {
      width: 25px;
    }
  }

  .el-table {
    font-size: 12px;
  }
}
</style>
